<template>
    <div class="common-layout">
      <el-container>
        <el-header style="background-color: white;height: 150px;"> 
            <div class="logo"  >
                <h3>患者查看</h3>
            </div>
        </el-header>
        <el-header style="background-color: white;height: 150px;"> 
            <div class="logo1"  >
             <el-input style="width: 100px;"   v-model="realName" placeholder="患者姓名"/> 
             <el-input style="width: 200px;"   v-model="orderNo" placeholder="患者病历号"/> 
             <el-button  style="width: 70px;margin-left: 30px;"  type="primary" icon="el-icon-search" @click="searchPatient">搜索 

</el-button>
             <div class="search">
            
                
             </div>

            </div>
            <el-tag type="primary" style="width: 200px;"  >今日已看诊{{  }}人</el-tag>
            <el-tag type="warning" style="width: 200px;" >当前有{{ }}人在排队</el-tag>
            </el-header>
       
        <el-main> 
            <el-main>
   
      <el-table :data="tableData"   style="width: 100%;">
        <el-table-column style="width: 100px;" prop="tableIndex" label="编号" />
        <el-table-column style="width: 100px;;" prop="pName" label="患者姓名" />
        <el-table-column style="width: 100px;" prop="bIndex" label="病人病历号" />
        <el-table-column style="width: 200px;" prop="option" label="操作">
        <template #default="{row}"><!-- 这里使用 slot-scope 获取当前行 -->
   <el-button type="primary" plain @click="insertMedicalRecord(row)">创建病案</el-button>
   <el-button type="warning" plain @click="skipPatient">跳过</el-button>
   <el-button type="success" plain @click="callPatient">叫号</el-button>
   <el-button type="success" class="showPatient"
    id="showPatient" plain @click="showPatient(row)">
    信息查看</el-button>
        </template>
        </el-table-column>
      </el-table>
  
    <el-dialog title="患者信息" :visible.sync="dialogVisible">
      <div>
        <p><strong>患者姓名:</strong> {{ selectedPatient.pName }}</p>
        <p><strong>病历号:</strong> {{ selectedPatient.bIndex }}</p>
        <!-- 可以添加更多患者信息 -->
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </el-main>
    </el-main>
 
      </el-container>
    </div>
  </template>
  <script setup name="LookPatient">
  import router from '@/router';
import axiosInstance from '@/utils/axiosUtils';
import { reactive, ref } from 'vue';
import { patientStorage } from '@/stores/patientStorage';
import { ElNotification } from 'element-plus';
const dialogVisible = ref(false); // 控制弹窗的显示与隐藏
const selectedPatient = ref({}); // 存储选择的患者信息
  const storage=patientStorage();
  const realName = ref('');
  const orderNo = ref('');
  const patientInfo=reactive({
       registerId:0,
        orderNo:null,
        realName:null,
        age:0,
        gender:null,
        identifyNumber:null
  });
 const tableData = ref([
   {
       tableIndex:null,
       pName:null,
       bIndex:null,
       option:null
   }
   
  ]);
  const searchPatient = () => {
    if (!realName.value && !orderNo.value) {
        alert('请输入姓名或病历号');
        return;
    }

    const params = {};
    if (realName.value) {
        params.realName = realName.value;
    }
    if (orderNo.value) {
        params.orderNo = orderNo.value;
    }

    axiosInstance.get('/api/register/selectOrderPatientInfo', { params }).then(res => {
        console.log(res);
        // 确保返回的数据是一个有效的数组
        if (Array.isArray(res.data)) {
            // 使用 map 处理数据并设置 tableData
            tableData.value = res.data.map((item, index) => ({
                tableIndex: index + 1,            // 计算编号
                pName: item.real_name,            // 绑定真实姓名
                bIndex: item.case_number,          // 绑定病历号
                option: ''                         // 如需在操作中使用，可留空或设置其他值
                
            }))
            
            patientInfo.registerId=res.data[0].id;
            patientInfo.realName=res.data[0].real_name;
            patientInfo.orderNo=res.data[0].case_number;
            patientInfo.age=res.data[0].age;
            patientInfo.gender=res.data[0].gender;
            patientInfo.identifyNumber=res.data[0].card_number;
            console.log(patientInfo);
            storage.setPatient(patientInfo);
            
        } else {
            console.error('返回数据不是数组', res.data);
        }
    }).catch(err => {
        console.error('请求失败', err);
    });
}

const showPatient = (row) => {
  selectedPatient.value = row; // 保存当前行数据
  dialogVisible.value = true; // 显示弹窗
  console.log(selectedPatient.value);
};
 
axiosInstance.get('/api/register/selectOrderPatientInfoList')
   .then(res => {
        console.log(res);
        // 确保返回的数据是一个有效的数组
        if (Array.isArray(res.data)) {            
            // 使用 map 处理数据并设置 tableData
            tableData.value = res.data.map((item, index) => ({
                tableIndex: index + 1,            // 计算编号
                pName: item.real_name,            // 绑定真实姓名
                bIndex: item.case_number,          // 绑定病历号
                option: ''                         // 如需在操作中使用，可留空或设置其他值
                
            }))
        } else {
            console.error('返回数据不是数组', res.data);
        }
    }).catch(err => {     
        console.error('请求失败', err)});



    const insertMedicalRecord = (row, index) => {
    selectedPatient.value = row; // 保存当前行数据
    console.log(row);
    console.log(index);

    if (row) { // 使用 row 而不是 scope.value
        const realName = row.pName; // 正确获取患者姓名
        const orderNo = row.bIndex; // 正确获取病历号
        const params = {};

        if (realName) {
            params.realName = realName;
        }
        if (orderNo) {
            params.orderNo = orderNo;
        }

        axiosInstance.get('/api/register/selectOrderPatientSuper', {
            params: { ...params } // 直接传递 params
        })
        .then(response => {
            sessionStorage.setItem('Patient', JSON.stringify(response.data)); // 使用 response.data 而不是 res.data
            ElNotification({
                title: '提示',
                message: '创建病案成功',
                type: 'info'
            });
            router.push({
                name: 'doctorWork',              
            });
        })
        .catch(error => {
            ElNotification({
                title: '提示',
                message: '请求失败',
                type: 'danger'
            });
        });
    }
}

</script>
 
<style scoped>
.logo {
    height: 80px;
    margin-top: 30px;
    background-color: white;
    padding-top: 10px;
    padding-left: 50px;
    border-top: 1px solid #ccc; /* 添加淡灰色边框 */
    border-bottom: 1px solid #ccc; /* 添加淡灰色边框 */
}
</style>

 